<template>
  <view class="coupon-list">
    <view class="coupon-label">
      领取优惠券
      <image
        @click.stop="emits('close')"
        :src="ossImg('others/goods/close.png')"
      />
    </view>
    <view class="coupon-container">
      <view
        class="coupon-card"
        v-for="(coupon, index) in couponList"
        :key="index"
      >
        <view class="coupon-info flex items-center">
          <view>
            <view class="price">{{ coupon.maxOff || 0 }}</view>
            <view class="whitespace-nowrap text-xs text-sub">
              {{
                coupon.threshold !== 0
                  ? `满${coupon.threshold}可用`
                  : "无门槛优惠券"
              }}</view
            >
          </view>
          <view class="coupon-content">
            <view class="label">{{ coupon.name }}</view>
            <view class="text-xs text-sub">
              <text
                v-if="coupon.startTime !== null || coupon.endTime !== null"
                >{{ `有效期 ${coupon.startTime} - ${coupon.endTime}` }}</text
              >

              <text v-else>
                领取{{ defaultDelay(coupon.delay) }}生效，有效天数{{
                  coupon.validDays || 0
                }}天
              </text>
            </view>
          </view>
        </view>
        <button v-if="coupon.picked === true" class="received">已领取</button>
        <button v-else @click="getCoupon(coupon)">立即领取</button>
      </view>
    </view>
    <view class="coupon-action">
      <button @click.stop="closebtn">完成</button>
    </view>
  </view>
</template>

<script setup>
import { defineEmits, defineProps } from "vue";
import { addCoupon } from "@/services/coupon";
import { message, ossImg } from "@/utils/utils";
const props = defineProps({
  couponList: {
    type: Array,
  },
});

const emits = defineEmits(["close", "getGoodsCoupon", "getCartInfo"]);

const getCoupon = async (coupon) => {
  const res = await addCoupon({
    ...{ couponId: coupon.id, appId: process.env.WXAPPID },
  });
  if (res?.code === 200) {
    getApp().emdlz(
      "track",
      "event",
      "store_page",
      "click",
      `receive_coupon_now_${coupon.maxOff}`,
      ""
    );

    getApp()
      .sr()
      .track("get_coupon", {
        coupon: [
          {
            coupon_id: coupon.id,
            coupon_name: coupon.name,
          },
        ],
        coupon_package: {
          coupon_package_id: coupon.id,
          coupon_package_name: coupon.name,
        },
        coupon_batch: {
          coupon_batch_id: coupon.id,
          coupon_batch_name: coupon.name,
        },
        // more...
      });
    getApp()
      .sr()
      .track("trigger_coupon", {
        coupon: [
          {
            coupon_id: coupon.id,
            coupon_name: coupon.name,
          },
        ],
        coupon_package: {
          coupon_package_id: coupon.id,
          coupon_package_name: coupon.name,
        },
        coupon_batch: {
          coupon_batch_id: coupon.id,
          coupon_batch_name: coupon.name,
        },
        // more...
      });
    emits("getGoodsCoupon");
    emits("getCartInfo");
  }
  message(res.message);
};

const defaultDelay = (val) => {
  let text = "";
  switch (val) {
    case -1:
      text = "即时";
      break;
    case 0:
      text = "当天";
      break;
    case 1:
      text = "次日";
      break;

    default:
      break;
  }

  return text;
};

const closebtn = () => {
  getApp().emdlz(
    "track",
    "event",
    "store_page",
    "click",
    "receive_coupon_accomplish",
    ""
  );
  emits("close");
};
</script>
<style lang="less" scoped>
@import "@/static/css/theme.less";

.coupon-action {
  padding: 28.5px;
  button {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #0058c6;
    border-radius: 20px;
    color: white;
    font-size: 16px;

    &::after {
      border: none;
    }
  }
}

.coupon-container {
  overflow: auto;
  height: 65vh;
}

.coupon-list {
  box-sizing: border-box;
  padding: 16px 16px 0 16px;

  .coupon-label {
    color: #2b2b2b;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    position: relative;
    margin-bottom: 32px;
    line-height: 1;

    image {
      width: 12px;
      height: 12px;
      display: block;
      right: 2px;
      top: 50%;
      transform: translate(0, -50%);
      position: absolute;
    }
  }

  .coupon-card {
    width: 100%;
    height: 90px;
    margin-bottom: 8px;
    background: url("@{ossPath}others/goods/coupon.png") no-repeat top left /
      100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: @primary-color;

    .coupon-info {
      box-sizing: border-box;
      padding-left: 18px;
      font-size: 12px;
      line-height: 1;
      display: flex;
      .coupon-content {
        width: 162px;
        padding-left: 19px;
        box-sizing: border-box;
        .text-xs {
          line-height: 20px;
        }
      }

      .price {
        font-size: 32px;
        position: relative;
        margin-bottom: 10px;

        &::before {
          content: "¥";
          font-size: 12px;
        }
      }

      .label {
        font-size: 14px;
        line-height: 20px;
      }
    }

    button {
      width: 80px;
      height: 36px;
      line-height: 36px;
      margin: 0 8px 0 0;
      background: #0058c6;
      border-radius: 18px;
      font-size: 14px;
      color: white;
      padding: 0;

      &.received {
        opacity: 0.5;
      }

      &::after {
        border: none;
      }
    }
  }
}
</style>
